/*  图表概览

1- 显示班级概况



 */

// 获取元素
const toggleBatchBtn = document.querySelector('#toggleBatchBtn'); // 显示成绩的小菜单
const batchUl = document.querySelector('#batch'); // 成绩的菜单


// 班级概况
function getStudentOverview() {
//   发送请求
axios.get("/student/overview").then((result)=>{
    // 判断请求状态
    if (result.data.code===0) {
        // console.log(result);
        // 获取里面的数据     解构知识
        const {avgAge,avgSalary,proportion,total}=result.data.data

            document.querySelector('.avgAge').innerText=avgAge; 
            document.querySelector('.avgSalary').innerText=avgSalary; 
            document.querySelector('.proportion').innerText=proportion; 
            document.querySelector('.total').innerText=total; 
    }
});  
}
// 班级概况  调用函数
getStudentOverview()


// 获取全部学员信息  简单改造下面的薪资折线图代码而来
function getStudentList(list) {
    axios.get("/student/list").then((result)=>{
// 获取数组
const list = result.data.data

// 接收数组 渲染折线图
salaryLine(list)
// 籍贯 饼图
homeTown(list)
}) 
}


// 薪资折线图
function salaryLine(list) {
        // 里面是一个大数组  拆分出来我们需要的元素 再组成数组即可
        // map方法
        // 期望薪资
        const salarys = list.map((v)=>v.salary)
        // 实际薪资
        const truesalarys = list.map((v)=>v.truesalary)
        // 同学名字
        const names = list.map((v)=>v.name)

        // 变成图表显示出来
        // 1- 获取有宽度跟高度的div元素 传入 echarts 实例化
        const myChart = echarts.init(document.querySelector('.line'));

        // 2- 添加一些配置
        const option = {
    // 设置线条的颜色
    color:["#ee6666","#5470c6"],
    title: {
      text: '薪资 Salary'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      // show: true,
      show: false,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: names,  //同学名单
    },
    yAxis: {
      type: 'value',   
    },
    // 滑块
    dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10,
        },
        {
          start: 0,
          end: 10, // 总宽度100  10 十分之一 ，  这个设置要上 上面的设置 保持一致
        },
      ],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        // color:"red",
        smooth: true, // 线条平滑
        symbol: 'circle', // 实心
        data: salarys, //真实数据
        
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true, // 线条平滑
        symbol: 'circle', // 实心
        data: truesalarys,  //真实数据
        
      }
    ]
    };
          //3- 使用指定的--设置配置项  和数据显示图表
          myChart.setOption(option) 
    
}

// 籍贯  -饼图
function homeTown(list) {
    
    const newList =[]
    list.forEach((v) => {
       
        const index= newList.findIndex((vv)=>vv.name===v.province)
        // 判断返回的结果情况
        if (index===-1) {
            newList.push({value:1,name:v.province})  
        }else{
            newList[index].value++  
        }
    });
     // 基于准备好的dom，初始化echarts实例
     const myChart = echarts.init(document.querySelector('.pie'));
     // 绘制图表  -指定图表的配置项和数据
 const option = {
title:{text:"籍贯 HomeTown"},
series: [
 {
   name: 'Nightingale Chart',
   type: 'pie',
   radius: [30, 150],
   center: ['50%', '50%'],
   roseType: 'area',
   itemStyle: {
     borderRadius: 8
   },
   data:newList,
 }
]
};

     // 使用指定的--设置配置项  和数据显示图表
     myChart.setOption(option) 
}

// 成绩   柱状图
// 安装次数 来获取成绩 数据
function getScoreBatch(batch) {
  // 发送请求
  axios.get("/score/batch",{params:{batch}}).then((result)=>{
    if (result.data.code===0) {
      // 解构
      const {avgScore, group, gt60, gt80, lt60}=result.data.data
      // console.log(avgScore, group, gt60, gt80, lt60);

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.barChart'));

// 指定图表的配置项和数据

const option = {
  // 设置图表的拉伸效果
  grid:{
    top:30,  //设置图表的顶部和容器的距离  设置拉伸
    bottom:20,  //设置图表的底部和容器的距离  设置拉伸
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  legend: {
    data: ['平均分', '低于60分人数', '60-80分人数',"高于80分人数"],
  },
  xAxis: [
    {
      type: 'category',
      data: group,  //组号
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 100,
      interval: 10,  //间隔
      axisLabel: {
        formatter: '{value} 分',
      },
    },
    {
      type: 'value',
      min: 0,
      max: 10,
      interval: 1,
      axisLabel: {
        formatter: '{value} 人',
      },
    },
  ],
  series: [
    {
      name: '平均分',
      type: 'bar',
      barWidth:17,//柱子的宽度
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        },
      },
      data: avgScore, //平均分
    },
    {
      name: '低于60分人数',
      type: 'bar',
      barWidth:17,//柱子的宽度
      yAxisIndex: 1, // 参考右侧的y轴
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        },
      },
      data:lt60,
    },
    {
      name: '60-80分人数',
      type: 'bar',
      barWidth:17,//柱子的宽度
      yAxisIndex: 1, // 参考右侧的y轴
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        },
      },
      data:gt60,
    },
    {
      name: '高于80分人数',
      type: 'bar',
      barWidth:17, //柱子的宽度
      yAxisIndex: 1, // 参考右侧的y轴
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        },
      },
      data:gt80,
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

    }
  })
}

// 调用函数
getStudentList()

// 调用 成绩函数
getScoreBatch(1)

// 添加点击事件 控制 成绩菜单 切换显示
toggleBatchBtn.addEventListener('click',function(e){
  batchUl.classList.toggle("show")
})
// 点击  第几次的成绩
batchUl.addEventListener('click',function(e){
  if(e.target.nodeName==="A"){
const index =e.target.dataset.index
// 根据第几次  来获取对应的成绩
getScoreBatch(index)
  }
})

